::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #0C1E52;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #0D5098;
}

.layout-header-dropdown {
  padding: 0;
}

.el-popper[x-placement^="bottom"] {
  margin-top: 0;
}

.layout-header {
  background-color: $--technology-blue;

  .header-logo-detail {
    color: $--color-FFFEFE;
  }

  .header-logo-text {
    color: $--color-white;
  }

  .layout-header-menu {
    .header-menu-item {
      color: $--color-white;
    }
  }

  .layout-header-other {
    .el-dropdown-link {
      span {
        color: $--color-white;
      }
    }
  }

  .header-menu-dropdown-link {
    color: $--color-white;
  }
}

.magus-nav {
  .magus-nav-collapse {
    background-color: #343d4c;
    color: $--color-white;

    i {
      color: $--color-white;
    }

    // &:hover {
    //   color: $--blue-color;

    //   i {
    //     color: $--blue-color;
    //   }
    // }
  }
}

.magus-footer {
  color: #b3b3b3;

  .magus-footer-icp {
    color: #b3b3b3;
  }
}

.el-dialog {
  .el-dialog__header {
    padding: 15px 20px;
    background-color: $--technology-blue;

    .el-dialog__title {
      font-size: 16px;
      color: $--color-white;
    }

    .el-dialog__headerbtn {
      i {
        color: $--color-white;
      }
    }
  }

  .el-dialog__body {
    padding: 15px 20px;
    background-color: #001640;
    box-sizing: border-box;

    .dialog-content {
      background-color: #08244E;
    }
  }

  .el-dialog__footer {
    padding: 10px 20px;
    background-color: #001640;
  }
}


.treeFooter-default {
  @include flexs();

  li {
    @include flexs();
    padding: 0 5px;
    font-size: 12px;

    .total-title {
      color: $--blue-color;
    }

    .online-title {
      color: $--ink-color;
    }

    .offline-title {
      color: $--grey-color;
    }

    .treeFooter-num {
      color: $--color-black;
      margin-left: 3px;
    }
  }
}

.el-button {
  overflow: visible;
}


.banner-notice .el-badge__content.is-fixed {
  border: 0;
  border-radius: 4px;
  left: 10px;
  padding: 0 5px;
  width: fit-content;
  transform: translateY(0) scale(0.8);
}

.banner-notice .el-badge__content {
  height: 17px;
  width: content-box;
  line-height: 17px;
  padding: 0;
}

.bounce.banner-notice .el-badge__content.is-fixed {
  border: 0;
  right: 0;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  10% {
    top: 0;
  }

  50% {
    top: 5px;
  }

  75% {
    top: 2.5px;
  }

  80% {
    top: 5px;
  }

  100% {
    top: 0;
  }
}

.mainMenu {
  .el-tabs--border-card {
    border: none;
    box-shadow: none;
    background: none;

    .el-tabs__header {
      background: none;
      border: none;

      .el-tabs__item {
        font-size: 16px;
        border: none;
        height: 42px;
        line-height: 42px;
        padding: 0 20px !important;
        color: $--color-white;

        .menu-icon {
          margin-right: 5px;
        }

        &.is-active {
          color: $--color-white;
          border: none;
        }

        &:not(.is-disabled):hover {
          color: $--color-white;
        }
      }
    }
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    line-height: 42px;
    color: $--color-white;
  }

  .el-tabs__content {
    display: none;
  }
}

// 火狐页码红色兼容性
.el-pagination__editor.is-in-pagination input {
  box-shadow: none;
}

.el-table--mini th {
  // background: #f9f9f9;
  background-color: $--technology-blue !important;
  // color: #606266;
  color: $--color-white !important;
}

.el-table .caret-wrapper {
  margin: -10px 0;
}

.el-select {
  width: 100%;
}

// .filter-tree .el-tree-node__label{
//     font-size: 12px;
// }

.el-form-item--mini .el-form-item__label {
  font-size: 12px;
}

.el-date-editor--daterange,
.el-date-editor--datetime,
.el-date-editor--date {
  width: 100%;
}

.el-input--mini {
  height: 28px;

  &.el-textarea {
    height: auto;
  }
}

// tabs
.el-tabs--border-card {
  box-shadow: none;
  border: 1px solid $--common-border-5;

  &>.el-tabs__header {
    background: $--color-white;
    border-bottom: 1px solid $--common-border-5;
  }
}

.el-tabs__item {
  height: 30px;
  line-height: 30px;
}

.button-container {
  text-align: center;
}

//  tree-input
.tree-input.el-input {
  margin-bottom: 10px;
}

.one-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}

.tree-container {
  padding: 5px;
}

//tree border
.filter-tree {
  .el-tree-node__label {
    font-size: 12px;
  }
}

.layout-header-menu {
  .el-menu-vertical-demo {
    background-color: transparent !important;

    .el-submenu__title {
      color: $--color-white !important;
    }

    .el-menu-item.is-active {
      color: $--color-white !important;
    }

    .el-submenu.is-active {
      background-color: $--technology-navbar-active !important;
      position: relative;

      &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: $--color-white !important;
      }
    }

    .el-submenu__title {
      &:hover {
        background-color: $--technology-menu-hover-color !important;
        color: $--color-white !important;
      }
    }

    .el-menu-item {
      color: $--color-white !important;
    }
  }
}

.el-menu--horizontal {
  border-bottom: 0;

  .el-menu--popup-bottom-start {
    margin-top: 0;
  }
}

.el-menu--horizontal .el-menu-item[data-v-7b8b84a6]:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item[data-v-7b8b84a6]:not(.is-disabled):focus {
  color: $--color-white !important;
}

.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background-color: transparent;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  color: $--color-white;
  background-color: $--technology-menu-hover-color;
}

.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  color: $--color-white;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu__title.is-active {
  background-color: $--technology-navbar-active;
  color: $--color-white;
}

.el-submenu.is-active .el-submenu__title {
  border-color: transparent;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title {
  background-color: $--technology-sideBarBg-active;
  color: $--color-white;
}

.magus-main-layout {
  .layout-left-close {
    background-color: #07407d !important;

    &:before {
      border-color: transparent #fff transparent transparent;
    }
  }

  .layout-left-open {
    background-color: #07407d !important;

    &:before {
      border-color: transparent #fff transparent transparent;
    }
  }

  .main-layout-left {
    background-color: #0c1e52 !important;
  }

  .main-layout-right {
    .layout-right-search {
      background-color: #0c1e52 !important;
    }

    .layout-right-main {
      background-color: #0c1e52 !important;
    }
  }
}

.magusAddTemplate {
  background-color: #0c1e52 !important;
  border-color: #07407d !important;

  .magusAddTemplate-title {
    background-color: $--technology-blue !important;
    border-color: #07407d !important;
    color: #fff;
  }

  .magusAddTemplate-footer {
    background-color: #0c1e52 !important;
    border-color: #07407d !important;
  }
}

.magusTree-search {
  border: 1px solid #07407d !important;
  background-color: #0C1E52 !important;
}


.el-tree {
  background-color: #0c1e52 !important;

  .custom-tree-node {
    color: #fff;
    ;
  }
}

.magusTab {
  .tablayout {
    .tablayout-left {
      .tablayout-left-inner {
        .tablayout-left-item.top {
          color: $--color-white !important;
        }
      }
    }

    .tablayout-right {
      .tablayout-right-inner {
        .tablayout-right-tab {
          .tablayout-right-tabitem {
            color: #AFC5FF !important;
          }

          .tablayout-right-tabitem.active {
            background-color: transparent !important;
            color: $--color-white !important;
            border-top: 0 !important;
            border-bottom: 2px solid $--color-white !important;
          }
        }
      }
    }
  }
}

.magus-paging .paginationBar_pre {
  color: $--color-white !important;
}

.el-pagination__jump {
  color: $--color-white !important;
}

.magusTree {
  background-color: #0c1e52 !important;
}

.rule-list-name {
  color: #fff !important;
}

.rule-item-title {
  color: #fff !important;
}

.el-range-input {
  background-color: transparent;
}

.platform-auths {
  .platform-auths-roles {
    .platform-auths-rolescontent {
      li {
        color: #fff !important;

        &:hover {
          background-color: $--technology-menu-hover-color !important;
        }
      }

      li.active {
        background-color: $--technology-menu-hover-color !important;
      }
    }
  }
}

.start-fan {
  .tip {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    text-align: left;
    color: #ff7474;
  }
}

.magus-layout {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-color: #001640;
}